<template>
  <div class="mg16 flex_start">
    <apply-left :setpData="setpData"></apply-left>
    <div class="apply_right">
      <div class="apply_body">
        <div class="apply_title">会后数据报告</div>
        <div class="alone-topBox">
          <div class="flex flex-warp flex_bt">
            <div class="flex flex-warp" style="align-items: center">
              <div class="mb16">
                <span class="pr10">所属行业</span>
                <el-select v-model="searchObj.industryType" placeholder="请选择" class="width200 mr10">
                  <el-option v-for="item in industryTypeList" :key="item.name" :label="item.name" :value="item.name" />
                </el-select>
              </div>
              <div class="mb16 mr16">
                <span class="pr10">单位类型</span>
                <el-select v-model="searchObj.companyType" placeholder="请选择" class="width200" clearable
                  @change="changeunit">
                  <el-option v-for="item in companyTypeList" :key="item.name" :label="item.name" :value="item.id" />
                </el-select>
              </div>
              <div class="mb16 mr16">
                <span class="pr10">职位</span>
                <el-select v-model="searchObj.postType" placeholder="请选择" class="width200" clearable>
                  <el-option v-for="item in postTypeList" :key="item.name" :label="item.name" :value="item.id" />
                </el-select>
              </div>
              <div class="mb20">
                <el-button @click="React">重置</el-button>
                <el-button type="primary" @click="SearchListBt">筛选</el-button>
              </div>
            </div>
            <div></div>
          </div>
        </div>
        <div class="apply_center">
          <i class="el-icon-warning" style="color: #0c7ff2; padding-right: 7px; font-size: 14px"></i>
          <span>赞助的会议已结束，请于{{ endTime }}前，发送会后报告至您的邮箱，到期后会后数据报告将无法获取</span>
          <el-button type="primary" :disabled="isTimeOut" style="margin-left: 10px" @click="emailDia = true">
            发送会后数据及报告</el-button>
        </div>
        <div class="tableBox">
          <el-table v-loading="loading" :data="DataTable" style="width: 100%" max-height="620"
            :default-sort="{ prop: 'date', order: 'descending' }">
            <el-table-column prop="title" label="姓名" min-width="100" align="left">
              <template slot-scope="scope">
                <div class="flex">
                  {{ scope.row.name }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="sampleName" label="手机号" min-width="150" align="left">
              <template slot-scope="scope">
                {{ scope.row.mobile }}
              </template>
            </el-table-column>

            <el-table-column prop="lyState" label="邮箱" min-width="150" align="left">
              <template slot-scope="scope">
                {{ scope.row.email }}
              </template>
            </el-table-column>

            <el-table-column prop="3" label="所属行业" min-width="100" align="left">
              <template slot-scope="scope">
                <div>{{ scope.row.industry }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="3" label="单位名称" min-width="200" align="left">
              <template slot-scope="scope">
                <div>{{ scope.row.company }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="3" label="单位类型" min-width="100" align="left">
              <template slot-scope="scope">
                <div>{{ scope.row.unit_type }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="3" label="职位" min-width="100" align="left">
              <template slot-scope="scope">
                <div>{{ scope.row.duty_type }}</div>
              </template>
            </el-table-column>
          </el-table>
          <div class="alignRight">
            <Pagination :total="total" :page="searchObj.page" :limit="searchObj.limit" @pagination="paginations" />
          </div>
        </div>
      </div>
      <!-- 发送邮箱 -->
      <el-dialog title="发送邮箱" :visible.sync="emailDia" width="550px">
        <!-- <el-dialog
      width="450px"
      :visible.sync="innerVisible"
      append-to-body>
      <div style="text-align: center;font-size: 16px; color:#0c7ff2;font-weight: bold;margin-bottom: 10px;">3i讲堂个人信息授权与保护声明</div>
      <div style="text-align: center;font-size: 14px; color:#333;margin-bottom: 15px;">
        个人信息授权书
      </div>
      <div style="height: 300px;
      overflow-y: auto;">
        【特别提示】为保障您的合法权益，在接受本《个人信息授权书》（以下简称“《授权书》”）前，请您仔细阅读本《授权书》的全部内容，充分理解《授权书》所有条款内容，尤其是加粗部分。通过网络页面点击确认，即表示您同意接受本《授权书》的全部约定内容并生效。如您对本《授权书》内容及页面提示信息有疑问，请您暂停后续操作，您可以通过电话客服（010-51654077-8229）或发送邮件（netmeeting@instrument.com.cn）的方式进行咨询。

关于个人信息的更多处理规则，请访问《仪器信息网隐私权政策》以了解更详细的情况。<br>

北京信立方科技发展股份有限公司、【合作伙伴】：<br>

<br>

本人充分理解并同意，仪器信息网“3i讲堂”服务是由北京信立方科技发展股份有限公司（以下简称“信立方”）与【合作伙伴】合作为本人提供的【3i讲堂会议】服务。现本人主动报名参加此项服务，为客观、准确的向本人提供更优质的服务，就使用本人相关个人信息，本人同意并授权如下：<br>

一、为使用仪器信息网“3i讲堂”服务，本人同意并授权信立方收集本人姓名、手机号码、电话号码、电子邮件、工作单位（工作单位性质及名称、地址）、职务、所属行业、调研问卷信息。<br>

二、为帮助改善和提升3i讲堂的服务质量，方便信立方和合作伙伴进行运营数据分析并为我提供礼品邮寄、资料推送邮寄（含电子邮件）、电话回访、仪器采购推荐、耗材申请试用等服务，本人同意并授权信立方将收集的本人前述信息共享给【合作伙伴】，本人同意并授权信立方将收集的本人前述信息共享给【合作伙伴】。<br>

如您因个人原因不同意信息共享，可邮件申请撤回信息共享。邮件地址：netmeeting@instrument.com.cn，邮件中注明会议名称、日期、预留手机号，信立方会在1-5个工作日内处理并回复。<br>
      </div>
    </el-dialog> -->
        <div class="mt15">
          <span class="label_email">请填写邮箱地址，接收名单</span>
          <span class="label_ms">如果接收会后数据报告为多个邮箱，请用英文“逗号”进行分隔</span>
        </div>
        <div style="margin: 15px 0 0;">
          <el-input v-model="companyData.imLinkemail" class="email_input" placeholder="请填写正确的邮箱地址"></el-input>

        </div>
        <div style="color: red;line-height: 19px;font-size: 13px;">请确保您输入的电子邮件地址是正确的，<br>
          因邮箱地址输入错误可能产生的侵权责任，由贵司自行承担！</div>

        <!-- <div>
        <span style="cursor: pointer;color: #0c7ff2;"  @click="innerVisible=true" target="_blank" rel="noopener noreferrer"
          >《3i讲堂个人信息授权与保护声明》</span
        >
      </div> -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="emailDia = false">取 消</el-button>
          <el-button type="primary" @click="sendEmailDia()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 评价 -->
    <el-dialog title="评价服务" :visible.sync="appraiseDia" width="800px" center :close-on-click-modal="false">
      <div class="pd32">
        <el-form  :model="appraise" :rules="rules" ref="ruleForm">
            <el-form-item prop="question1">
        <div class="dia_list">
          <div class="dia_list_title">1.您对运营人员的总体满意度如何？ <span class="col7e8">（专业性、沟通过程、服务态度等）</span></div>
          <div>
            <el-radio-group v-model="appraise.question1">
              <el-radio label="非常满意">非常满意</el-radio>
              <el-radio label="比较满意">比较满意</el-radio>
              <el-radio label="满意">满意</el-radio>
              <el-radio label="不太满意">不太满意</el-radio>
              <el-radio label="非常不满意">非常不满意</el-radio>
            </el-radio-group>
          </div>
        </div>
        </el-form-item>
        <el-form-item prop="question2">
        <div class="dia_list">
          <div class="dia_list_title">2.您对本次会议的总体满意度如何？ <span class="col7e8">（会议主题、专家级别、报告内容）</span></div>
          <div>
            <el-radio-group v-model="appraise.question2">
              <el-radio label="非常满意">非常满意</el-radio>
              <el-radio label="比较满意">比较满意</el-radio>
              <el-radio label="满意">满意</el-radio>
              <el-radio label="不太满意">不太满意</el-radio>
              <el-radio label="非常不满意">非常不满意</el-radio>
            </el-radio-group>
          </div>
        </div>
        </el-form-item>
        <el-form-item prop="question3">
        <div class="dia_list">
          <div class="dia_list_title">3.您对销售人员的总体满意度如何？ <span class="col7e8">（专业性、沟通过程、服务态度等）</span></div>
          <div>
            <el-radio-group v-model="appraise.question3">
              <el-radio label="非常满意">非常满意</el-radio>
              <el-radio label="比较满意">比较满意</el-radio>
              <el-radio label="满意">满意</el-radio>
              <el-radio label="不太满意">不太满意</el-radio>
              <el-radio label="非常不满意">非常不满意</el-radio>
            </el-radio-group>
          </div>
        </div>
        </el-form-item>
        <el-form-item prop="question4">
        <div class="dia_list" style="border: none;">
          <div class="dia_list_title">4.您认为本次会议有哪些方面需要改进和提高？</div>
          <div>
            <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="appraise.question4">
            </el-input>
          </div>
        </div>
        </el-form-item>
      </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="appraiseDia = false">取消</el-button>
        <el-button type="primary" @click="saveEvaluation('ruleForm')">确定</el-button>

      </span>
    </el-dialog>
  </div>
</template>
<script>
import applyLeft from "../compontents/left.vue";
import stepsDemo from "../compontents/Steps.vue";
import indexapi from "@/api/index";
import Pagination from "@/components/Pagination/index.vue";
import { changeDateFormat4, changeDateFormat5 } from "@/utils/commin";
export default {
  components: {
    applyLeft,
    stepsDemo,
    Pagination,
  },
  data() {
    return {
      appraiseDia: false,
      appraise: {
        question1: '',
        question2: '',
        question3: '',
        question4: '',
      },
      rules: {
          question1: [
            { required: true, message: '请选择您对运营人员的总体满意度', trigger: 'change' }
          ],
          question2: [
            { required: true, message: '请选择您对本次会议的总体满意度', trigger: 'change' }
          ],
          question3: [
            { required: true, message: '请选择销售人员的总体满意度', trigger: 'change' }
          ],
          question4: [
            { required: true, message: '请输入本次会议有哪些方面需要改进和提高', trigger: 'blur' }
          ],
        },
      searchObj: {
        imshowId: "",
        industryType: "", //行业类型
        postType: "", //职位类型
        companyType: "", //单位类型
        limit: 10,
        page: 1,
        mid: 22625,
      },
      companyData: {
        imLinkemail: ''
      },
      innerVisible: false,
      isTimeOut: false,
      emailDia: false,
      changeKey: 0,
      total: 0,
      loading: false,
      companyTypeList: [], //单位类型列表
      postTypeList: [], //职位类型列表
      industryTypeList: [], //行业类型列表
      endTime: '',
      DataTable: [],
      stepsList: ["填写赞助报告的内容", "提交报告内容审核"],
      isShow: true,
      setpData: {
        step: 3,
        stepExamineOneStatus: 4,
        stepExaminetwoStatus: 4,
      },
    };
  },
  mounted() {
    this.searchObj.imshowId = this.$store.getters.imShowId;
    this.searchObj.mid = this.$route.params.mid;
    this.endTime = changeDateFormat5(changeDateFormat4(this.$route.params.time))
    var newDate = new Date().valueOf()
    var oldDate = new Date(this.endTime).valueOf()
    if (newDate > oldDate) {
      this.isTimeOut = true
    }
    this.SearchList();
    this.getTypeList();
    this.selectUnitType();
  },
  methods: {
    saveEvaluation(formName) {


      this.$refs[formName].validate((valid) => {
          if (valid) {
            this.appraise.imshowid = this.$store.getters.imShowId
      this.appraise.mid = this.$route.params.reportmid ? this.$route.params.reportmid : ''
      indexapi.selfMeting.AddMeetingEvaluation(this.appraise).then(res => {
        this.$message({ type: 'success', message: '评价成功！' })
        this.appraiseDia = false
        this.SearchList()
      })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    sendEmailDia() {
      if (this.companyData.imLinkemail == '') {
        this.$message({ type: 'error', message: '请输入邮箱！' })
        return false
      }
      let form = {
        email: this.companyData.imLinkemail,
        imshowId: this.$store.getters.imShowId,
        mid: this.$route.params.mid
      }
      indexapi.support.sendMeetingPersonEmail(form).then(res => {
        this.$message({ type: 'success', message: '发送成功！' })
        this.innerVisible = false
        this.emailDia = false
        //判断是否已评价
        if (this.$route.params.isEvaled == 0) {
          this.appraiseDia = true
        }
      })
    },
    changeunit(val) {
      this.searchObj.postType = ''
      let obj = {};
      obj = this.companyTypeList.find((item) => {
        return item.id === val;
      });
      let form = {
        parentid: obj.id,
        typename: "ZWLX",
      };
      indexapi.video.selectUnitType(form).then((res) => {
        this.postTypeList = res.data;
      });
    },
    //获取单位类型
    selectUnitType() {
      let form = {
        parentid: 0,
        typename: "DWLX",
      };
      indexapi.video.selectUnitType(form).then((res) => {
        this.companyTypeList = res.data;
      });
    },
    //获取各种类型的列表
    getTypeList() {
      indexapi.support.getIndustryClassifySelectByLevel().then((res) => {
        //获取行业分类
        if (res.code == 200) {
          this.industryTypeList = res.data.data;
        }
      });
    },
    // 重置
    React() {
      this.searchObj = {
        imshowId: this.$store.getters.imShowId,
        industryType: "", //行业类型
        postType: "", //职位类型
        companyType: "", //单位类型
        limit: 10,
        page: 1,
        mid: this.$route.params.mid,
      };
      this.SearchList();
    },
    // 查询
    SearchListBt() {
      this.searchObj.limit = 10;
      this.searchObj.page = 1;
      this.SearchList();
    },
    SearchList() {
      this.loading = true;
      indexapi.support.getSponsorMeetingPerson(this.searchObj).then((res) => {
        this.loading = false;
        this.DataTable = res.data.records;
        this.DataTable.forEach((item) => {
          switch (item.ispub) {
            case 0:
              item.ispub_operStr = "上架";
              item.ispub_type = 1;
              break;
            case 3:
              item.ispub_operStr = "上架";
              item.ispub_type = 1;
              break;
            case 1:
              item.ispub_operStr = "下架";
              item.ispub_type = 3;
              break;
            default:
              item.ispub_operStr = "--";
              break;
          }
        });
        this.total = res.data.total;
      });
    },
    // 分页
    paginations(val) {
      this.searchObj.limit = val.limit;
      this.searchObj.page = val.page;
      this.SearchList();
    },
  },
};
</script>
      
<style lang="scss" scoped>
.pd32 {
  padding: 0 16px;

  .dia_list {
    padding: 10px 0 17px;
    border-bottom: 1px solid #E5EAF0;

    .dia_list_title {
      font-size: 14px;
      font-weight: 600;
      color: #202933;
      line-height: 24px;
      margin-bottom: 10px;

      span {
        color: #7E8790;
        font-weight: 200 !important;
      }
    }
  }

  // .dia_list:last-child {
  //   border: none;
  // }
}

.pr10 {
  padding-right: 10px;
}

.topButton {
  position: absolute;
  right: 20px;
  top: 16px;
}

.flex_bt {
  justify-content: space-between;
}

.mr10 {
  margin-right: 10px;
}

.icon_right {
  font-weight: 600;
  color: #0c7ff2;
  cursor: pointer;
  font-size: 18px;
}

.width120 {
  width: 120px !important;
}

.w456 {
  width: 456px !important;
}

.table_logo {
  width: 55px;
  height: 32px;
  display: inline-block;
  padding: 2px 4px;
  border: 1px solid #f0f3f7;
  margin-right: 8px;
  object-fit: contain;
}

.btm_butn {
  padding: 23px;
  border-top: 1px solid #e5eaf0;
  margin-top: 23px;
  text-align: center;
}

.flex_start {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.apply_right {
  margin-left: 16px;
  flex-grow: 1;
  width: 50%;

  .apply_body {
    background: #fff;

    .apply_title {
      font-size: 14px;
      font-weight: 600;
      color: #202933;
      padding: 13px 16px;
      border-bottom: 1px solid #e5eaf0;
    }

    .apply_center {
      @include flex(row, center, flex-start);
      margin-top: 15px;
      margin-bottom: 5px;
      margin-left: 16px;
      font-size: 12px;
      color: #4f5862;
    }

    .body {
      border-top: 1px solid #f0f3f7;
      padding: 20px;

      .top {
        padding: 8px 16px;
        background: #e7f2fe;
        border-radius: 4px 4px 4px 4px;
        @include flex(row, center, space-between);
        color: #4f5862;
        font-size: 12px;
      }

      .instrument-edit-ruleForm::v-deep .el-form-item__label {
        color: #202933;
      }

      .instrument-edit-ruleForm::v-deep .el-form-item {
        margin-bottom: 32px;
      }

      .instrument-edit-ruleForm::v-deep .el-form-item:last-child {
        margin-bottom: 0;
      }

      .instrument-edit-ruleForm::v-deep .formItemInner {
        margin-bottom: 0;
      }

      .instrument-edit-ruleForm::v-deep .el-form-item__content {
        line-height: 32px;
      }

      .instrumentListBox {
        // width: 1436px;
        box-shadow: inset 0px -1px 0px 1px #dde2e8;
        padding: 16px;
        background: #f5f8fc;
        margin: 0 auto;
      }

      .essentialInformation {
        // width: 1404px;
        padding-bottom: 15px;
        background: #ffffff;
        padding-top: 24px;
        padding-left: 16px;
        margin: 0 16px;
      }

      .essentialInformation_text {
        font-size: 16px;
        font-weight: bold;
        line-height: 30px;
        margin: 0;
        padding-left: 12px;
        border-left: 4px solid #0c7ff2;
        line-height: 16px;
        margin-bottom: 20px;
      }
    }
  }
}
::v-deep .el-form-item{
  margin-bottom: 0;
}
::v-deep .el-form-item__content{
  margin-left: 0 !important;
  line-height: 20px !important;
}
::v-deep .el-form-item__error{
  top: 73%;
    left: 3px;
}
</style>